<template>
	<div class="register absolute">
		<div class="shading">
			<div class="pictrue acea-row row-center-wrapper">
				<image :src="logoUrl" v-if="logoUrl" />
				<image src="/static/images/logo2.png" v-else />
			</div>
		</div>
		<div class="whiteBg" v-if="formItem === 1">
			<div class="title acea-row row-center-wrapper">
				<div class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in navList" @click="navTap(index)" :key="index">{{ item.name }}</div>
			</div>
			<div class="list" :hidden="current !== 0">
				<form @submit.prevent="submit">
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/phone_1.png"></image>
							<input type="text" :placeholder="i18n.Tel" v-model="account" required />
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/code_2.png"></image>
							<input type="password" :placeholder="i18n.Paw" v-model="password" required />
						</div>
					</div>
				</form>
				<!-- 		<navigator class="forgetPwd" hover-class="none" url="/pages/users/retrievePassword/index">
					<span class="iconfont icon-wenti"></span>忘记密码
				</navigator> -->
			</div>
			<div class="list" :hidden="current !== 1">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png"></image>
						<input type="text" :placeholder="i18n.Tel" v-model="account" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png"></image>
						<input type="text" :placeholder="i18n.Verify" class="codeIput" v-model="captcha" />
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">{{ i18n.Getverify }}</button>
					</div>
				</div>
				<div class="item" v-if="isShowCode">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png"></image>
						<input type="text" :placeholder="i18n.Verify" class="codeIput" v-model="codeVal" />
						<div class="code" @click="again"><img :src="codeUrl" /></div>
					</div>
				</div>
			</div>
			<div class="logon" @click="loginMobile" :hidden="current !== 1">{{ i18n.login }}</div>
			<div class="logon" @click="submit" :hidden="current === 1">{{ i18n.login }}</div>
			<!-- <div class="tip">
				没有账号?
				<span @click="formItem = 2" class="font-color-red">立即注册</span>
			</div> -->
		</div>
		<div class="whiteBg" v-else>
			<div class="title">{{ i18n.Rerify }}</div>
			<div class="list">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/phone_1.png"></image>
						<input type="text" :placeholder="i18n.Tel" v-model="account" />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png"></image>
						<input type="text" :placeholder="i18n.Verify" class="codeIput" v-model="captcha" />
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">{{ i18n.Getverify }}</button>
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="/static/images/code_1.png"></image>
						<input type="password" :placeholder="i18n.Paw" v-model="password" />
					</div>
				</div>
				<div class="item" v-if="isShowCode">
					<div class="acea-row row-middle">
						<image src="/static/images/code_2.png"></image>
						<input type="text" :placeholder="i18n.Verify" class="codeIput" v-model="codeVal" />
						<div class="code" @click="again"><img :src="codeUrl" /></div>
					</div>
				</div>
			</div>
			<div class="logon" @click="register">{{ i18n.Register }}</div>
			<div class="tip">
				{{ i18n.Haveid }}?
				<span @click="formItem = 1" class="font-color-red">{{ i18n.Speedlogin }}</span>
			</div>
		</div>
		<div class="bottom"></div>
	</div>
</template>
<script>
const globalData = getApp().globalData;
import dayjs from '@/plugin/dayjs/dayjs.min.js';
import sendVerifyCode from '@/mixins/SendVerifyCode';
import { loginH5, loginMobile, registerVerify, register, getCodeApi, getUserInfo, getCaptcha } from '@/api/user';
import attrs, { required, alpha_num, chs_phone } from '@/utils/validate';
import { validatorDefaultCatch } from '@/utils/dialog';
import { getLogo } from '@/api/public';
// import cookie from "@/utils/store/cookie";
import { VUE_APP_API_URL } from '@/utils';

const BACK_URL = 'login_back_url';

export default {
	name: 'Login',
	mixins: [sendVerifyCode],
	data: function() {
		return {
			navList: [{ name: globalData.$t('login').Tologin }, { name: globalData.$t('login').Quicklogin }],
			current: 1,
			account: '',
			password: '',
			captcha: '',
			formItem: 1,
			type: 'login',
			logoUrl: '',
			keyCode: '',
			codeUrl: '',
			codeVal: '',
			isShowCode: false
		};
	},
	watch: {
		formItem: function(nval, oVal) {
			if (nval == 1) {
				this.type = 'login';
			} else {
				this.type = 'register';
			}
		}
	},
	mounted: function() {
		// this.getCode();
		// this.getLogoImage();
		const app = getApp();
		this.$nextTick(() => {
			this.logoUrl = app.globalData.site_logo;
			console.log(app.globalData.site_logo);
		});
	},

	methods: {
		again() {
			// this.codeUrl =
			// 	VUE_APP_API_URL +
			// 	"/sms_captcha?" +
			// 	"key=" +
			// 	this.keyCode +
			// 	Date.parse(new Date());
			this.getcaptcha();
		},
		getCode() {
			let that = this;
			getCodeApi()
				.then(res => {
					that.keyCode = res.data.key;
				})
				.catch(res => {
					that.$util.Tips({
						title: res
					});
				});
		},
		async getLogoImage() {
			let that = this;
			getLogo(2).then(res => {
				that.logoUrl = res.data.logo_url;
			});
		},
		async loginMobile() {
			let that = this;
			if (!that.account)
				return that.$util.Tips({
					title: that.i18n.Inputtel
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.i18n.Inputtruetel
				});
			if (!that.captcha)
				return that.$util.Tips({
					title: that.i18n.Verify
				});
			if (!/^[\w\d]+$/i.test(that.captcha))
				return that.$util.Tips({
					title: that.i18n.Verifytrue
				});
			loginMobile({
				phone: that.account,
				sms_code: that.captcha,
				spread: that.$Cache.get('spread')
			})
				.then(({ data }) => {
					const backUrl = that.$Cache.get(BACK_URL) || '/pages/index/index';
					that.$Cache.clear(BACK_URL);
					that.$store.commit('LOGIN', {
						token: data.token,
						time: data.exp
					});
					that.$store.commit('SETUID', data.user.uid);
					that.$store.commit('UPDATE_USERINFO', data.user);
					if (backUrl === '/pages/index/index' || backUrl === '/pages/order_addcart/order_addcart' || backUrl === '/pages/user/index') {
						uni.switchTab({
							url: backUrl
						});
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				})
				.catch(res => {
					that.$util.Tips({
						title: res
					});
				});
		},
		async register() {
			let that = this;
			if (!that.account)
				return that.$util.Tips({
					title: that.i18n.Inputtel
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.i18n.Inputtruetel
				});
			if (!that.captcha)
				return that.$util.Tips({
					title: that.i18n.Verify
				});
			if (!/^[\w\d]+$/i.test(that.captcha))
				return that.$util.Tips({
					title: that.i18n.Verifytrue
				});
			if (!that.password)
				return that.$util.Tips({
					title: that.i18n.InputPaw
				});
			if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password))
				return that.$util.Tips({
					title:that.i18n.InputPaweasy
				});
			register({
				account: that.account,
				captcha: that.captcha,
				password: that.password,
				spread: that.$Cache.get('spread')
			})
				.then(res => {
					that.$util.Tips({
						title: res
					});
					that.formItem = 1;
				})
				.catch(res => {
					that.$util.Tips({
						title: res
					});
				});
		},
		async code() {
			let that = this;
			if (!that.account)
				return that.$util.Tips({
					title: that.i18n.Inputtel
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.i18n.Inputtruetel
				});
			// if (that.formItem == 2) that.type = "register";
			await registerVerify({
				phone: that.account,
				type: 'login',
				key: that.keyCode,
				code: that.codeVal
			})
				.then(res => {
					that.$util.Tips({ title: res.message });
					that.sendCode();
				})
				.catch(res => {
					console.log(res, 'res22222222');
					that.getcaptcha();

					that.$util.Tips({ title: res });
				});
		},
		getcaptcha() {
			let that = this;
			getCaptcha().then(data => {
				// that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
				that.codeUrl = data.data.captcha;
			});

			that.isShowCode = true;
		},
		navTap: function(index) {
			this.current = index;
		},
		async submit() {
			let that = this;
			if (!that.account)
				return that.$util.Tips({
					title: that.i18n.InputID
				});
			if (!/^[\w\d]{5,16}$/i.test(that.account))
				return that.$util.Tips({
					title: that.i18n.InputIDtrue
				});
			if (!that.password)
				return that.$util.Tips({
					title: that.i18n.InputPaw
				});
			loginH5({
				account: that.account,
				password: that.password,
				spread: that.$Cache.get('spread')
			})
				.then(({ data }) => {
					const backUrl = that.$Cache.get(BACK_URL) || '/pages/index/index';
					that.$Cache.clear(BACK_URL);
					that.$store.commit('LOGIN', {
						token: data.token,
						time: data.exp
					});
					that.$store.commit('SETUID', data.user.uid);
					that.$store.commit('UPDATE_USERINFO', data.user);
					if (backUrl === '/pages/index/index' || backUrl === '/pages/order_addcart/order_addcart' || backUrl === '/pages/user/index') {
						uni.switchTab({
							url: backUrl
						});
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				})
				.catch(e => {
					that.$util.Tips({
						title: e
					});
				});
		},
		
	},
	computed: {
		i18n() {
			return globalData.$t('login');
		}
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: this.i18n.login
		});
	}
};
</script>
<style lang="scss">
.code img {
	width: 100%;
	height: 100%;
}

.acea-row.row-middle {
	input {
		margin-left: 20rpx;
	}
}
</style>
